<%@page import="cn.jsj.hzu.qm.facecloud.ciuser.pojo.Ciuser"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<%
Ciuser ciuser = (Ciuser) request.getSession().getAttribute("ciuser");
Ciuser loginCiuser =  (Ciuser) request.getSession().getAttribute("ciuser");
if (ciuser == null) {
	response.sendRedirect("../errorPage/toLoginErrorPage.html");
	return;
}

//如果有请求域，则修改请求域中的内容,这意味着管理员在修改他人信息
Ciuser reqCiuser = (Ciuser) request.getAttribute("ciuser");
if (reqCiuser != null) {
	ciuser = reqCiuser;
	
	pageContext.setAttribute("hideTitle", "$('#my_title').hide();//隐藏标题");
}


else{ //否则，我在修改自己的信息
	pageContext.setAttribute("hideTitle", " //标题不会被隐藏！");
}

pageContext.setAttribute("ciuser", ciuser);
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>No Login Data</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>login successfully</title>
<link rel="stylesheet" href="../css/style.default.css" type="text/css" />
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/baseServerLink.js" type="text/javascript"
	charset="utf-8"></script>

<style>
		.redAlert{
			color:red;
			animation: twinkle 1s infinite alternate;
		}
		@keyframes twinkle {
			0%{
				opacity:0.8;
			}
			100%{
				opacity:0.2;
			}
		}

		.greenAlert {
			color: green;
		}
</style>
<!-- 表格的样式 -->
<style>
td:nth-child(1) {
	text-align: right;
	width: 40%;
}

td:nth-child(2) {
	text-align: left;
	width: 60%;
}
</style>


<script type="text/javascript">
	function userDetail(file) {
		var o = document.getElementById("detail");
		var tops = file.offsetTop - 80;
		o.offsetTop = tops;
		var str = tops + "px;"
		o.style.visibility = "visible";
	}

	function closed() {
		var o = document.getElementById("detail");
		o.style.visibility = "hidden";
	}

	$(function() {
		$("#lo").click(function(){$("#type").val(0)});
	});
</script>


<style type="text/css">
.my_green_button {
	background-color: #95f04b;
	border: 0;
	border-radius: 20px;
	-moz-border-radius: 20px;
	/* 老的 Firefox */
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #5c8f30;
	border: 1px solid #6eac3a;
}
</style>

<script type="text/javascript">
	function userDetail(file) {
		var o = document.getElementById("detail");
		var tops = file.offsetTop - 80;
		o.offsetTop = tops;
		var str = tops + "px;"
		o.style.visibility = "visible";
	}

	function closed() {
		var o = document.getElementById("detail");
		o.style.visibility = "hidden";
	}
	
	//  提交图片！！！
	$(function() {
		$("#upload").click(function() {
			var ciuserid = <%=ciuser.getId()%>;
			console.log("show");

			
			console.log($("#my_file").val()); //$('#uploadForm')[0]
			if($("#my_file").val() == ""){
				alert("请选择文件!");
				hiddenFlashDialog();
				return;
			}
			$myfile = $("#my_file");
			formData = new FormData();
			formData.append("photo", $myfile[0].files[0]);
			formData.append("message", ciuserid);
			formData.append("A", 'A');
			formData.append("B", 'B');
			
			$.ajax({
				type : "post",
				url : "../CiuserFileUploadServlet",
				data : formData,
				type : "POST",
	
				contentType : "multipart/form-data",
				// async : false, //异步
				processData : false, //很重要，告诉jquery不要对form进行处理
				contentType : false, //很重要，指定为false才能形成正确的Content-Type
				success : function(message) {
					console.log(message);
					alert("完成");
					eval("message="+message);
					$("#my_img").attr("src", message['photourl']);
				},
				error:function(mess){
					alert(mess);
					
				},
				
			});
		})
	})
	
	function setSubmitDisable(tt){
		
		if(tt == true){
			$("#save").attr("disabled",true);
			$("#submittext").css("text-decoration","line-through");
			$("#submittext").css("color","gray");
		}
		else{
			$("#save").attr("disabled",false);
			$("#submittext").css("text-decoration","none");
			$("#submittext").css("color","#FFFFFF");
		}
		
	}

	$(function() {
		//检查函数
		fcheck = function() {
			setSubmitDisable( false);
			var $newPwd = $("#newPwd");
			var $confirmNewPwd = $("#confirmNewPwd");
			if ($newPwd.val() == "") {
				setSubmitDisable( true);
				$("#newPwdSide").text("密码不能为空！");
				
				$("#newPwdSide").attr("class", "desc redAlert");
			} else {
				$("#newPwdSide").text("Accepted");
				$("#newPwdSide").attr("class", "desc greenAlert");
			}

			if ($newPwd.val() != $confirmNewPwd.val()) {
				setSubmitDisable( true);
				$("#confirmSide").text("确认密码不一致！");
				$("#confirmSide").attr("class", "desc redAlert");
			} else {
				$("#confirmSide").text("Accepted");
				$("#confirmSide").attr("class", "desc greenAlert");
			}

		}

		// $oldPwd=$("#oldPwd");
		$newPwd = $("#newPwd");
		$confirmNewPwd = $("#confirmNewPwd");

		//设置禁用
		setSubmitDisable( true);

		// $oldPwd.change(fcheck);
		$newPwd.keyup(fcheck);
		$confirmNewPwd.keyup(fcheck);
		fcheck();
		//按下重置按钮，不能提交
		$("#reset").click(function() {
			setSubmitDisable(true);
		})
	});
</script>


</head>

<body>
	<div class="bodywrapper" id="my_title">
		<div class="topheader orangeborderbottom5">
			<div class="left">
				<h1 id="lo" class="logo">
					签到<span>系统</span>
				</h1>



				<br clear="all" />

			</div>
			<!--left-->

			<div class="right">

				<!--userdata-->
			</div>
			<!--userinfodrop-->
		</div>
		<!--right-->
	</div>
	<!--topheader-->

	<div class="" style="">
		<div class="contentwrapper padding10"
			style="margin: 0 auto; width: 80%; text-align: center;">
			<div class="errorwrapper error403" style="">
				<div class="errorcontent">
					<br/>
					<!-- JSP c:if -->
					<c:if test="${sessionScope.ciuser.type>=1}">
					<br>
					<div style="text-align: left;">
						<button type="button" id="accodediv_button_show">显示此用户的激活码信息</button>
						<button type="button" id="accodediv_button_hide" style="display: none;">隐藏此用户的激活码信息</button>
					</div>
					
					<br/>
					<script type="text/javascript">
						$(function(){
							$("#accodediv_button_show").click(function(){
								$("#accodediv").show();
								
								$("#accodediv_button_show").hide();
								$("#accodediv_button_hide").show();
							});
							
							$("#accodediv_button_hide").click(function(){
								$("#accodediv").hide();
								
								$("#accodediv_button_hide").hide();
								$("#accodediv_button_show").show();
								
							});
						})
					</script>
					<div id="accodediv" style="display: none; border: 1px solid blue;">
						<br/><br/><br/>
						<h1>此用户授权激活码信息</h1>
						<h3>activation_code</h3>
						<br/>
						<h2>注意，标准用户设置此字段是无效的。</h2>
						<br/><br/><br/>
							<table border="0" cellspacing="" cellpadding="" width="80%"
								style="">
								
								<tr>
									
									<td><span>用户 ${pageScope.ciuser.name} 的激活码：</span></td>
									<td><input type="text" id="activation_code" name="activation_code"
										value="${pageScope.ciuser.activation_code}" class="longinput"
										readonly="readonly" style="width: 100%;"> 
										<button type="button" id="random_reload">生成</button>
										<script type="text/javascript">
											var code_raw_str="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
											$(function(){
												$("#random_reload").click(function(){
													var code = "";
													
													//【随机选择一个字符，生成激活码中的一位数】
													for(var i = 1; i <=20; i++){
														var randomItem = code_raw_str[Math.floor(Math.random() * code_raw_str.length)];
														code += randomItem;
														if(i%5 == 0 && i != 20){
															code += '-';
														}
													}
													
													// 将激活码设置至对应位置
													$("#activation_code").val(code);
												})
												
											});
											
											
											
										</script>
										<br> <span class="desc">新用户可使用激活码注册。建议每次使用前生成一个新的激活码。</span></td>
								</tr>
								<tr>
									<td><span>剩余最大激活量：</span></td>
									<td><input type="number" id="number_of_times" name="number_of_times"
										value="${pageScope.ciuser.number_of_times}" class="longinput"> <br>
										<span class="desc">此值小于等于零将无法激活新账户</span></td>
								</tr>
								<tr>
									<td><span>到期时间：</span></td>
									<td><input type="date" id="activation_code_end" name="activation_code_end"
										value="${pageScope.ciuser.activation_code_end}" class="longinput"> <br>
										<span class="desc">超期激活码将无法使用</span></td>
								</tr>
								<tr>
									<td><span> </span></td>
									<td><button type="button" id="activation_submit"> 提交 </button></td>
								</tr>
							</table>
							
							<script type="text/javascript">
								$("#activation_submit").click(function(){
									$.ajax({
										type : "post",
										url : "../CiuserServlet",
										data : {
											"mode":32,
											"id":$("#id").val(),
											"activation_code":$("#activation_code").val(),
											"number_of_times":$("#number_of_times").val(),
											"activation_code_end":$("#activation_code_end").val()
										},
										type : "POST",
										success : function(message) {
											console.log(message);
											alert("完成");
											location.reload();
										},
										error:function(mess){
											alert(mess);
											
										},
										
									});
								})
							</script>
					</div>
					
					
					</c:if>
						<br/><br/><br/>
					<!-- end JSP c:if -->
					<h1>修改账户信息</h1>
					<h3>update information</h3>
					
					
					<form class="stdform" action="../CiuserServlet" method="post">
					<input type="text" name="id" id="id" value="${pageScope.ciuser.id}"
						style="display: none;" /> <br />
						
					<input type="text" name="mode" id="mode" value="31"
						style="display: none;" /> <br />
					<table border="0" cellspacing="" cellpadding="" width="80%"
						style="">
						
						<tr>
							<td><span>学(工)号：</span></td>
							<td><input type="text" id="sid" name="sid"
								value="${pageScope.ciuser.sid}" class="longinput"
								readonly="readonly"> <br> <span class="desc">注册后请勿更改学号</span></td>
						</tr>
						<tr>
							<td><span>姓名：</span></td>
							<td><input type="text" id="name" name="name"
								value="${pageScope.ciuser.name}" class="longinput"> <br>
								<span class="desc">此字段将显示在统计名单上</span></td>
						</tr>

						<tr>
							<td><span>密码：</span></td>
							<td><input type="text" id="newPwd" name="password"
								value="${pageScope.ciuser.password}" class="longinput">
								<br> <span class="desc" id="newPwdSide">请键入密码</span></td>
						</tr>
						
						<tr id="conftr">
							<td><span>确认密码：</span></td>
							<td><input type="text" id="confirmNewPwd" 
							
							value=""
								name="confirmNewPwd" class="longinput"> <br> <span
								class="desc" id="confirmSide">确认密码须于密码相同</span></td>
						</tr>
						
						<c:if test="${sessionScope.ciuser.type==1}">
						<script>
						$('#confirmNewPwd').val('${pageScope.ciuser.password}');
						$("#newPwd").keyup(function(){
							$('#confirmNewPwd').val($("#newPwd").val());
							
						});
						
						$('#conftr').hide();
						</script>
						</c:if>
						<tr>
							<td><span>电子邮箱：</span></td>
							<td><input type="text" id="email" name="email"
								value="${pageScope.ciuser.email}" class="longinput"> <br>
								<span class="desc">提供联系方式</span></td>
						</tr>

						

						<!-- JSP c:if -->
						<c:if test="${sessionScope.ciuser.type == 1}">
							<tr>
								<td><span>角色：</span></td>
								<td><select id="type" name="type" style="width: 86%;">
										<option value="1">系统管理员</option>
										<option value="2" >实验室管理员</option>
										<option value="0" >标准用户</option>
								</select> <br> <span class="desc">用户角色</span></td>
							</tr>

							<tr>
								<td><span>账户可用性</span></td>
								<td><select id="is_available" name="is_available"
									style="width: 86%;">
										<option value="1">启用</option>
										<option value="0">禁用</option>
								</select> <br> <span class="desc">若禁用，此账户将不能登陆和签到 </span></td>
							</tr>
							<tr>
								<td><span>授权实验室名：</span></td>
								<td><input type="text" id="memo" name="memo"
									value="${pageScope.ciuser.memo}" class="longinput"> <br>
									<span class="desc">备注：1.当普通用户设置此字段时，其用户类型会变为实验室管理员。2.管理员用户不需要设置此字段。</span></td>
							</tr>
							<script>
							$(function(){
								$("#type").val(${pageScope.ciuser.type});
								
								//关于禁用的判断
								$("#is_available").change(function(){
									if($("#type").val() == 1 && "<%=loginCiuser.getSid()%>"==$("#sid").val()){
										$("#is_available").val('1');
										alert("你不能禁用自己！");
									}
									
								});
								$("#is_available").val(${pageScope.ciuser.is_available});
							});
							</script>
						</c:if>
						<tr>
							<td></td>
							<td>
								<div id="uu" style="width: 100%;">
									<button type="reset" id="reset" class="stdbtn btn_orange">
										<span id="resettext">重置</span>
									</button>
									<button type="submit" id="save" class="stdbtn btn_blue">
										<span id="submittext">提交修改</span>
									</button>
								</div>
							</td>
						</tr>
					</table>
					</form>
					<br/>
					<br/>
					
					<h1>账户照片信息</h1>
					
					<h3>(将作为人脸识别的依据)</h3>
					<br/>
					<br/>
					
					<div style="margin: 0 auto; text-align: center; width:300px; height:300px; border:1px solid red;">
					<img style="width: 300px; height: 300px;" alt="你成功地上传了照片，但其中未检测到人脸。请尝试切换拍摄角度，或者联系开发人员。" id="my_img" src=<% 
					if(ciuser.getPhotoPath() != null){
						out.write(ciuser.getPhotoPath());
					}else{
						out.write("../page_img/ciuser_noimg.jpg");
					}
					%> />
					</div>
					<br/>
					<br/>
					<table  border="0" cellspacing="" cellpadding="" width="80%"
						style="">
						
						<tr>
							<td><span>照片信息：</span></td>
							<td>
								<div>
									<label>input</label> <input id="my_file" type="file" accept="image/jpeg"/><br/>
									<button type="button" id="upload" class="stdbtn btn_lime">上传</button>
								</div>
								<p id="my_message">等待上传。上传前，用户的信息不会改变。</p>
							</td>
						</tr>
					</table>



				</div>
				<!--errorcontent-->
			</div>
			<!--errorwrapper-->
		</div>

	</div>


	<!--bodywrapper-->
</body>
</html>
